<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <meta name="viewport"
         content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>

    <style type="text/css"><!--
    #banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden; font-size:16px}
    #banner_list img {border:0px;}
    #banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:500px; }
    #banner_info{position:absolute; bottom:4px; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
    #banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
    #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
        margin:0; padding:0; bottom:3px; right:5px; height:20px}
    #banner ul li { padding:0 8px; line-height:18px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer; margin:0; font-size:16px;}
    #banner_list a{position:absolute;}
       *{margin:0; padding: 0 }
       .popup{
           position:absolute;top:0;left:0;right:0;background-color: white;
           display: none;
           z-index:15;
       }
       .popup ul{
           list-style-type: disc;
       }
       .popup li{
          height:2rem;
           border-bottom: 1px solid blue;
           line-height:2rem;
           padding-left:1rem;
       }
#shadow{
    position:fixed;
    top:0;bottom:0;
    left:0;right:0;
    background-color: rgb(0,0,0);
    opacity: 0.4;
    display: none;
    z-index:5;
}
       .btn{}
   </style>

</head>
<body>
<header style="position: relative;z-index: 20;background-color: white">
    <img style="float: left;width:2rem"  src="image/top_back.png"/>
    <img id="cat" class="btn"  style="float: right;width:2rem;" src="image/top_category.png"/>

    <div style="padding: 0 3.5rem 0 3.5rem ">
        <input style="
        width: 100%;height:3rem; border-radius: 1rem;border: none;
        background-image:url('./image/search.png');
        font-size: 2rem;
        background-repeat: no-repeat;
        background-color: gainsboro"
               type="text" placeholder="     输入目的地">
    </div>



</header>
<div style="position: relative;">
    <div class="popup">
        <ul>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
        </ul>
    </div>
</div>

<!--<div >-->
 <!--<img style="width: 100%" src="image/commend.jpg" >-->
<!--</div>-->
<div id="banner">
    <div id="banner_bg"></div>
    <!--标题背景-->
    <div id="banner_info"></div>
    <!--标题-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div id="banner_list">
        <a href="#" target="_blank"><img src="image/r_1.jpg" title="景点1" alt="景点1" /></a>
        <a href="#" target="_blank"><img src="image/r_2.jpg" title="景点2" alt="景点2" /></a>
        <a href="#" target="_blank"><img src="image/r_3.jpg" title="景点3" alt="景点3" /></a>
        <a href="#" target="_blank"><img src="image/hotel_bg1.jpg" title="景点4" alt="景点4" /></a>
        <a href="#" target="_blank"><img src="image/hotel_bg2.jpg" title="景点5" alt="景点5" /></a>
    </div>
</div>

<div style="height: 4rem;border-bottom: 1px solid white;border-top: 1px solid white">
    <div style="box-sizing: border-box;text-align: center;float:left;width:50%; height: 100%;border-right: 1px solid darkgrey ">
        <img src="image/jd_arr1.png">热门景点</div>
    <div style="float: left;text-align: center;width: 50%; height: 100%">
        <img src="image/jd_arr2.png">我身边</div>
</div>

<div style="height:1rem;border-bottom: 1px solid white;background-color: #e3e3e3 "></div>

<div style="height:3rem;border-bottom: 1px solid darkgray">
<div id="area" class="btn" style="box-sizing: border-box; text-align: center;float: left;width: 33%;
 height:100%;border-right: 1px solid darkgrey">位置区域 <img src="image/channelBg.png"> </div>

<div style="box-sizing: border-box; text-align: center;float: left;width: 33%;
height:100%;border-right: 1px solid darkgrey">达人推荐 <img src="image/channelBg.png"> </div>

<div style="box-sizing: border-box; text-align: center;float: left;width: 33%;
height:100%;">全部主题<img src="image/channelBg.png">  </div>
</div>
<div style="position: relative;">
    <div class="popup">
        <ul>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
            <li>全部主题</li>
        </ul>
    </div>
</div>






<div style="height:22rem;margin-left: 0.5rem">

     <div style="width: 100%;height: 7rem;">
         <div style="width: 6rem;float:left"><img style="border-radius: 0.5rem;width:6rem;margin-top:0.8rem" src="image/jd_pic.jpg"> </div>
  <div style="width: 13rem;height: 6rem; float: left;margin-left: 0.5rem">
        <div style="margin-top:0.4rem">洞头望海楼景区</div>
     <div style="margin-top: 0.4rem"><img  style="width: 2rem" src="image/fan.jpg"> <img style="width: 2rem"src="image/quan.jpg">
       <span style="float: right"> <span style="color: coral;font-size: 1.5rem">￥100</span>
         <span style="color:gray">起</span> </span> </div>

      <div style="margin-top:0.4rem">风景名胜
          <span style="float: right;color: gray">￥240</span>   </div>
      <div style="margin-top:0.4rem">已售2008</div>
           </div>
     </div>
    <div style="width:100%;height: 0.1rem;background-color:darkgray "></div>

    <div style="width: 100%;height: 7rem;">
        <div style="width: 6rem;float:left"><img style="border-radius: 0.5rem;width:6rem;margin-top:0.8rem" src="image/jd_pic.jpg"> </div>
        <div style="width: 13rem;height: 6rem; float: left;margin-left: 0.5rem">
            <div style="margin-top:0.4rem">洞头望海楼景区</div>
            <div style="margin-top: 0.4rem"><img  style="width: 2rem" src="image/fan.jpg"> <img style="width: 2rem"src="image/quan.jpg">
       <span style="float: right"> <span style="color: coral;font-size: 1.5rem">￥100</span>
         <span style="color:gray">起</span> </span> </div>

            <div style="margin-top:0.4rem">风景名胜  <span style="float: right;color: gray">￥240</span>   </div>
            <div style="margin-top:0.4rem">已售2008</div>
        </div>
    </div>
    <div style="width:100%;height: 0.1rem;background-color:darkgray "></div>

    <div style="width: 100%;height: 7rem;">
        <div style="width: 6rem;float:left"><img style="border-radius: 0.5rem;width:6rem;margin-top:0.8rem" src="image/jd_pic.jpg"> </div>
        <div style="width: 13rem;height: 6rem; float: left;margin-left: 0.5rem">
            <div style="margin-top:0.4rem">洞头望海楼景区</div>
            <div style="margin-top: 0.4rem"><img  style="width: 2rem" src="image/fan.jpg"> <img style="width: 2rem"src="image/quan.jpg">
       <span style="float: right"> <span style="color: coral;font-size: 1.5rem">￥100</span>
         <span style="color:gray">起</span> </span> </div>

            <div style="margin-top:0.4rem">风景名胜  <span style="float: right;color: gray">￥240</span>   </div>
            <div style="margin-top:0.4rem">已售2008</div>
        </div>
    </div>
    <div style="width:100%;height: 0.1rem;background-color:darkgray "></div>

</div>


<div style="height: 5rem;border-bottom: 1px solid grey;text-align: center;margin-top: 1rem">
    <span style="font-size: 1rem; ">点击查看更多...</span> </div>


<footer>
<div style="width: 100%;margin-left: 0.5rem;background-color:#F2F2F2;position: absolute;">
    <table style="text-align: center">

        <tr> <td style="width: 300rem"><img src="image/bottom_home_h.png"></td>
            <td style="width: 300rem"><img src="image/bottom_find.png"></td>
            <td style="width: 300rem"><img src="image/bottom_shop.png"></td>
            <td style="width: 300rem"><img src="image/bottom_mine.png"></td>
        </tr>
        <tr><td>首页</td>
            <td>发现</td>
            <td>购物车</td>
            <td>我的</td>
        </tr>
    </table>
</div>
</footer>
<div id="shadow"></div>
<script type="text/javascript">// <![CDATA[
var t = n = 0, count;
$(document).ready(function(){
    count=$("#banner_list a").length;
    $("#banner_list a:not(:first-child)").hide();
    $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
    $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
    $("#banner li").click(function() {
        var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
        n = i;
        if (i >= count) return;
        $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
        $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
        $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
        $(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});
    });
    t = setInterval("showAuto()", 4000);
    $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
    n = n >=(count - 1) ? 0 : ++n;
    $("#banner li").eq(n).trigger('click');
}
// ]]></script>
<script>
    $(".btn")//选中所有class=btn的元素
            .click(//设置click事件监听,
            function (){
        var i=$(".btn").index(this);//求出当前被单击的元素是集合中的序号是多少
        if($(".popup").css("display")=='block'){
            $(".popup").eq(i).css("display","none");//eq是选择集合中的下表等于i的元素
            $("#shadow").css("display","none");
        }else{
            $(".popup").eq(i).css("display","block");
            $("#shadow").css("display","block");
        }
    }
    );
</script>
</body>
</html>